<template>
  <el-card style="height: 100%; display: flex; flex-direction: column;" body-style="flex: 1;">
    <template #header>
      <div class="title">水费明细表</div>
      <el-button size="small" type="primary" @click="exportEvent" class="export-btn">
        <template #icon>
          <SvgIcon icon="download" />
        </template>
        导出表格
      </el-button>
    </template>

    <vxe-table border show-footer ref="tableRef" :export-config="{ type: 'xlsx' }" :data="tableData"
      :merge-cells="computedMergeCells" :footer-data="footerData" height="100%" :row-config="{ height: 50 }">
      <vxe-column field="date" title="日期"></vxe-column>
      <vxe-column field="area" title="区域"></vxe-column>
      <vxe-column field="waterType" title="用水类型"></vxe-column>
      <vxe-column field="price" title="水单价(元)">
        <template #default="{ row }">
          {{ row.price.toFixed(2) + "元" }}
        </template>
      </vxe-column>
      <vxe-column field="usage" title="用水量(m³)">
        <template #default="{ row }">
          {{ row.usage.toFixed(2) + "m³" }}
        </template>
      </vxe-column>
      <vxe-column field="fee" title="水费(元)">
        <template #default="{ row }">
          {{ row.fee.toFixed(2) + "元" }}
        </template>
      </vxe-column>
    </vxe-table>
  </el-card>
</template>

<script setup>
import { useAreaStore } from "@/stores/area";
import { usePriceRuleStore } from "@/stores/priceRule";
import { useWaterPriceStore } from "@/stores/waterPrice";
import dayjs from "dayjs";
import { ref, computed } from "vue";

let waterPriceStore = useWaterPriceStore();
let priceRuleStore = usePriceRuleStore();
let areaStore = useAreaStore();

let props = defineProps({
  dateRange: {
    type: Array,
    default: [],
  },
});

const tableRef = ref();

// 表格数据
const tableData = computed(() => {
  const data = waterPriceStore?.priceDetail?.areas ?? [];
  const dateRange = props.dateRange;
  return data.map((item) => ({
    date: `${dayjs(dateRange[0]).format("YYYY-MM-DD")}至${dayjs(
      dateRange[1]
    ).format("YYYY-MM-DD")}`,
    area: areaStore.getAreaNameById(item.area_id),
    waterType: priceRuleStore.getPriceRuleNameById(item.rule_id),
    price: +priceRuleStore.getPriceRulePriceById(item.rule_id),
    usage: +item.usage,
    fee: +item.price,
  }));
});

// 动态计算合并单元格配置
const computedMergeCells = computed(() => {
  if (!tableData.value.length) return [];
  return [
    {
      row: 0,
      col: 0,
      rowspan: tableData.value.length,
      colspan: 1,
    },
  ];
});

const getTotalUsage = () => {
  const total = tableData.value.reduce((sum, row) => sum + row.usage, 0);
  return total.toFixed(2);
};

const getTotalFee = () => {
  const total = tableData.value.reduce((sum, row) => sum + row.fee, 0);
  return total.toFixed(2);
};

// footer数据
const footerData = ref([
  {
    date: "合计",
    usage: computed(() => getTotalUsage()),
    fee: computed(() => getTotalFee()),
  },
]);

// 导出方法
const exportEvent = () => {
  const $table = tableRef.value;
  if ($table) {
    $table.openExport({
      filename: "水费明细表",
      type: "xlsx",
      exportMethod: ({ options }) => {
        return $table.exportData(
          Object.assign({}, options, {
            original: false,
            formatter: true,
            footer: true,
            columnFilterMethod: ({ column }) => {
              return column.property !== "seq";
            },
          })
        );
      },
    });
  }
};
</script>

<style scoped>
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.export-btn {
  display: flex;
  align-items: center;
}
</style>
